<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { isAlipay } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
const num = ref(5)
onMounted(async () => {
    const mail = localStorage.getItem('mail')
    console.log(route.query);
    const res = await isAlipay({ out_trade_no: route.query.out_trade_no, trade_no: route.query.trade_no, mail })
    if (res.data.code === '200') {
        const item = setInterval(() => {
            num.value--
            if (num.value === 0) {
                clearInterval(item)
                router.push({ name: 'Task', query: { id: '2' } })
            }
        }, 1000)
    }
})
</script>

<template>
    <div class="content">
        <h2>支付成功</h2>
        <p>请等待<span>{{ num }}</span>秒后回到主页</p>
    </div>
</template>

<style scoped>
.content {
    width: 800px;
    box-sizing: border-box;
    padding: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    margin: auto;
    text-align: center;
}

p {
    margin-top: 30px;
}

span {
    color: red;
}
</style>